<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、导入mapbox的依赖 -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <!-- 2、设置地图容器的挂载点 -->
    <div id="map">

    </div>
    <script>
        /* token */
        mapboxgl.accessToken = 'pk.eyJ1IjoiZXJpYzA5MTciLCJhIjoiY2x3cTI2Zzg0MWY2dDJqcWVpdDI1MHNpcCJ9.k9gLW7ZgLyISNdYHIEEGdQ'
        const map = new mapboxgl.Map({
            /* target-ol */
            container: 'map', // container ID
            /* style-layers */
            style: 'mapbox://styles/mapbox/satellite-streets-v12', // style URL
            center: [6.6301, 45.35625],
            zoom: 12,
            pitch: 80
        });
        map.on("style.load", () => {
            map.setFog({

            })
            /* dem */
            map.addSource('mapbox-dem', {
                'type': 'raster-dem',
                url: 'mapbox://mapbox.mapbox-terrain-dem-v1'
            })
            map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 })
            setTimeout(() => {
                rotateMap();
            }, 4000)
        })
        function rotateMap() {
            /* 1、实现自动旋转的动画 */
            let bearing = map.getBearing();
            bearing += 30;
            console.log(bearing)
            map.easeTo({
                bearing,
                duration: 500,
                easing: n => n
            })
            /* 2、根据bearing的值实现白天和黑夜的切换 */
            /* 白天和黑夜的效果 */
            if (bearing < 0) {
                // night fog styling
                map.setFog({
                    range: [-1, 2],
                    "horizon-blend": 0.3,
                    color: "#242B4B",
                    "high-color": "#161B36",
                    "space-color": "#0B1026",
                    "star-intensity": 0.8,
                });
            } else {
                // day fog styling
                map.setFog({
                    range: [-1, 2],
                    "horizon-blend": 0.3,
                    color: "white",
                    "high-color": "#add8e6",
                    "space-color": "#d8f2ff",
                    "star-intensity": 0.0,
                });
            }
        }
        /* moveend */
        map.on("moveend", () => {
            rotateMap();
        })
    </script>
</body>

</html>